let Utils = require("../../framework/js/utils");

require("../../framework/js/aui/components/tab.component");

module.exports = {
    template: `
        <div class="anu-subpage" style="width: 100%;">                                         
                     
            <div class="subpage-navs" style="border-bottom: 1px solid #D3DCE6;">
                <div class="aui-layout aui-layout-grid align-item-center aui-align-justify">
                    <aui-tabnavs class="aui-tabnavs-grid aui-item-justify align-item-center aui-layout__item" ref="tabs" :tabs="tabs">    
                        <li class="aui-display-inline-block-i" style="vertical-align: middle" slot="appendli">就是个没用的</li>
                    </aui-tabnavs>  
                    <div class="aui-layout__item">右边的操作</div>                   
                </div>
            </div>
           
            <div class="tab-content" ref="tabcontent">
                <div role="tabpanel" class="tab-pane fade active in" :id="tabs[0].href" > 
                    tab1
                </div>
                <div role="tabpanel" class="tab-pane fade" :id="tabs[1].href" > 
                    tab2
                </div>
                <div role="tabpanel" class="tab-pane fade" :id="tabs[2].href" > 
                    tab3
                </div>
            </div>  
            
            <button type="button" class="btn btn-info" @click="setActive(2)">选中第二个</button>
        </div>
    `,
    data() {
        var ret = {};
        ret.tabs = [
            {
                active: 1,
                label: "Home",
                href: "ui_4_tab_1"
            },
            {
                active: 0,
                label: "Profile",
                href: "ui_4_tab_2"
            },
            {
                active: 0,
                label: "Messages",
                href: "ui_4_tab_3"
            }
        ];
        return ret;
    },
    mounted() {
        var self = this;
        window.s = self;
        rootcontroller.getPage(self).attachChildComponentReady();
    },
    methods: {
        service() {
        },
        setActive(index) {
            this.$refs.tabs.setActive(index);
        },
        onError(e) {
            console.log('-------------------');
            console.log(e);
            console.log('-------------------');
        }
    }
};